<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf Learn!</title>
    <script th:src="@{/webjars/jquery/3.2.1/dist/jquery.min.js}"> </script>
    <script th:src="@{/webjars/bootstrap/4.3.1/js/bootstrap.min.js}"></script>
    <link rel="stylesheet" th:href="@{webjars/bootstrap/4.3.1/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/style.css}"/>
</head>
<body>
<h1>Hello,Thymeleaf!</h1>
<img id="img1" alt="如果看到我，说明你很幸运..." th:src="@{/static/imgs/boy.jpg}" title="小哥哥"
    width="200px" height="200px class="rounded-circle/>
<button id="btn1" class="btn btn-block">Click Me!</button>
<div id="div1"></div>
<script type="text/javascript">
    $("#btn1").click(function () {
        console.log("按钮被点击");
        let val =$("#div1").html();
        if (val.length==0){
            $("#img1").attr({"src":"[[@{/}]]/static/imgs/girl.jpg","title":"小美女"});
            $("#div1").html("哎呀，被发现了...");
        } else if (val !=''){
            $("#img1").attr({"src":"[[@{/}]]/static/imgs/boy.jpg","title":"小哥哥"});
            $("#div1").html("");
        }
    });
</script>
<hr/>
<p th:text="'用户名:'+${user.name}"></p>
<div th:object="${user}">
    姓名:<label th:text="*{name}"></label><br/>
    备注:<label th:text="*{note}"></label><br/>
    所属库:<label th:text="*{dbName}"></label>
</div>
<hr />
<a th:href="@{https://www.baidu.com}">去百度</a><br>
<a th:href="@{/web/demo1(id=1, name='张三')}">去demo1</a><br>
<a th:href="@{/web/demo2/{id}(id=4)}">去demo2</a>
<hr />
<div>
    <input type="radio" th:field="${stu.stuSex}" name="stuSex" th:value="男" />男
    <input type="radio" th:field="${stu.stuSex}" name="stuSex" th:value="女" />女
</div>
<div>
    <label th:if="${stu.stuSex} == '男'">男</label>
    <label th:if="${stu.stuSex} == '女'">女</label>
</div>
<div>
    <label th:unless="${stu.stuSex} == '男'">女</label>
    <label th:unless="${stu.stuSex} == '女'">男</label>
</div>
<div th:switch="${stu.stuSex}">
    <span th:case="男">男</span>
    <span th:case="女">女</span>
    <span th:case="不详">不详</span>
</div>
<hr />
<form th:action="@{/file/upload}" method="post" enctype="multipart/form-data">
    <input type="file" name="myFile" /><br />
    <input type="submit" value="上传" />
    </form>
</body>
</html>